<template>
	<view class="bar">
	
	  <view class="ban" v-if="type==1">
	    <scroll-view class="banner" scroll-x="true" style="width: 100%">
	      <block v-for="(item, i) in hdlist" :key="i" style="display: flex;">
	        <view class="uni-bg" style="background-color: #FFFFFF;"  @click="goodsDetails(item,1)">
				<image :src="item.image" mode=""></image>	
				<view class="title">{{item.store_name}}</view>	
				<view class="price">{{item.price | notBuy}}</view>					 	
	        </view>  
	      </block>
	    </scroll-view>
	  </view>
	  <view class="ban" v-if="type==2">
	    <scroll-view class="banner" scroll-x="true" style="width: 100%" >
	      <block v-for="(item, i) in hdlist" :key="i" style="display: flex;" >
	        <view class="uni-bg" style="background-color: #FFFFFF;" @click="goodsDetails(item,2)">
	  				<image :src="item.product_img.split(',')[0]" mode=""></image>	
	  				<view class="title">{{item.product_name}}</view>		  						 	
	        </view>  
	      </block>
	    </scroll-view>
	  </view>
	</view>
</template>

<script>
	export default {
		props: {
			hdlist: {
				type: Array,
				default:  []
			},
			type:{
				type:Number
			}
		},
		data(){
			return {
				
			}
		},
		filters:{
			notBuy(price){
				if(price=="" || price=="0" || price=="0.00"){
					return "仅展示（非卖品）"
				}else{
					return price
				}
			}
		},
		methods:{
			goodsDetails(item,type){//商品详情
			 console.log(item,type)
				if(type==1){
					uni.navigateTo({//传商品id过去
						url:"/pages/goods_details/index?id=" + item.id
					})
				}else if(type==2){
					uni.navigateTo({//传商品id过去
						url:"/pages/goods_details/index2?id=" + item.id
					})
				}
			}
		}
		
		
	}
</script>

<style lang="scss" scoped>
  // 热门活动轮播图
  .bar {
    box-sizing: border-box;

    .ban {
      width: 100%;
      box-sizing: border-box;
      // padding: 20rpx 55rpx;
	  margin-top: 20rpx;
      overflow: hidden;
      .banner {
        overflow: hidden;
        white-space: nowrap; // 滚动必须加的属性
        height: 360rpx;
        .uni-bg {
          width: 260rpx;
          height: 340rpx;  
          display: inline-block;
          margin-right: 20rpx;
          overflow: hidden;
		  line-height: 40rpx;
		  border-radius: 8px;
		  image{
			  width: 260rpx;
			  height: 240rpx;
			  
		  }
		  .title{
			  font-weight: bold;
			  text-indent: 8rpx;
		  }
		  .price{
			font-size: 20rpx;
			text-indent: 8rpx;
			color: red;
		  }
        }
      }
    }
  }
	
</style>
